<article class="component active" id="tabs">
  <h2 class="component-title">Tabs</h2>
  <p class="component-description">Tabs allow to simply switch between different content.</p>

  <div class="component-example component-example-fullbleed">
    <header class="bar bar-nav">
      <h1 class='title'>Tabs</h1>
    </header>
    <div class="content">
      <div class="buttons-tab">
        <a href="#tab1" class="tab-link active button">All</a>
        <a href="#tab2" class="tab-link button">Potatos</a>
        <a href="#tab3" class="tab-link button">Tomatos</a>
      </div>
      <div class="content-block">
        <div class="tabs">
          <div id="tab1" class="tab active">
            <div class="content-block">
              <p>This is tab 1 content</p>
            </div>
          </div>
          <div id="tab2" class="tab">
            <div class="content-block">
              <p>This is tab 2 content</p>
            </div>
          </div>
          <div id="tab3" class="tab">
            <div class="content-block">
              <p>This is tab 3 content</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class='title'>Tabs</h1>
</header>
<div class="content">
  <div class="buttons-tab">
    <a href="#tab1" class="tab-link active button">All</a>
    <a href="#tab2" class="tab-link button">Potatos</a>
    <a href="#tab3" class="tab-link button">Tomatos</a>
  </div>
  <div class="content-block">
    <div class="tabs">
      <div id="tab1" class="tab active">
        <div class="content-block">
          <p>This is tab 1 content</p>
        </div>
      </div>
      <div id="tab2" class="tab">
        <div class="content-block">
          <p>This is tab 2 content</p>
        </div>
      </div>
      <div id="tab3" class="tab">
        <div class="content-block">
          <p>This is tab 3 content</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endhighlight %}

</article>

<article class="component active">
  <h3 class="component-title">Secondary Tabs</h3>
  <p class="component-description">Secondary Tabs is less important than Primary tabs.</p>

  <div class="component-example component-example-fullbleed">
    <header class="bar bar-nav">
      <h1 class='title'>Secondary Tabs</h1>
    </header>
    <div class="content">
      <div class="content-block">
        <div class="buttons-row">
          <a href="#tab1" class="tab-link active button">Tab 1</a>
          <a href="#tab2" class="tab-link button">Tab 2</a>
          <a href="#tab3" class="tab-link button">Tab 3</a>
        </div>
      </div>
      <div class="tabs">
        <div id="tab1" class="tab active">
          <div class="content-block">
            <p>This is tab 1 content</p>
          </div>
        </div>
        <div id="tab2" class="tab">
          <div class="content-block">
            <p>This is tab 2 content</p>
          </div>
        </div>
        <div id="tab3" class="tab">
          <div class="content-block">
            <p>This is tab 3 content</p>
          </div>
        </div>
      </div>
    </div>
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class='title'>Secondary tabs</h1>
</header>
<div class="content">
  <div class="content-block">
    <div class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab1" class="tab active">
      <div class="content-block">
        <p>This is tab 1 content</p>
      </div>
    </div>
    <div id="tab2" class="tab">
      <div class="content-block">
        <p>This is tab 2 content</p>
      </div>
    </div>
    <div id="tab3" class="tab">
      <div class="content-block">
        <p>This is tab 3 content</p>
      </div>
    </div>
  </div>
</div>
{% endhighlight %}

</article>


